<template>
	<div class="content" v-myTitle :data-title="title" ref="pageInfo">
		<div ref="myDiv" class="topsNav">
			<van-tabs v-model="tabActive" title-active-color='#242424' title-inactive-color='#777777'>
				<van-tab :title="item.name" v-for="(item,index) in tabList" :key="index"></van-tab>
			</van-tabs>
		</div>
		<back-img></back-img>
		<div class="info">
			<van-pull-refresh v-model="isLoading" @refresh="onRefresh" :disabled="refDisabled">
			<!-- :style="{height:topH}" -->
			<div class="list"  v-if='tabActive==0'> 
			    <!-- v.rgst_arrange?'': -->
				<div class="doctorItem" @click="toDoctor('/doctorShow',v)" v-for="(v,i) in doctorList" :key='i'>
					<div class="doctorItem-top"  @click.stop="v.rgst_arrange&&v.rgst_arrange.length>0?v.rgst_arrange[v.chooseDayIndex].remainder<=0?showNo():toDoctorYuyue('/chooseTime',v,v.rgst_arrange[v.chooseDayIndex].date):toDoctor('/doctorShow',v)">
						<img class="doctorItem-top-img" :src="v.doctor_sex=='男'?require('@/assets/img/man.jpg'):require('@/assets/img/women.jpg')" alt="">
						<div class="doctorItem-top-info">
							<div class="flex1 doctorItem-top-info-name">
								<div>{{v.doctor_name||''}} <span>{{v.staff_protec_post}}</span></div>
								<div v-if='v.rgst_arrange&&v.rgst_arrange.length>0' class="doctorItem-top-info-btn flex3" :class="v.rgst_arrange[v.chooseDayIndex].remainder<=0?'noBtn':''">{{v.rgst_arrange[v.chooseDayIndex].remainder<=0?'约满':'有号'}}
								</div>
							</div>
							<div class="doctorItem-top-info-t clamp5">
								{{v.staff_persprf||'-'}}
							</div>
						</div>
					</div>
					<div class="doctorItem-time" v-if='v.rgst_arrange'>
						出诊日期
						<div class="doctorItem-time-list">
							<div @click="v.chooseDayIndex=b" :class="v.chooseDayIndex==b?'active':''" class="doctorItem-time-list-i" v-for="(a,b) in v.rgst_arrange" :key='b'>{{getStr(a.date)}}</div>
						</div>
					</div>
				</div>
				<div class="noData" v-if='doctorList.length<=0'>
					<img class="noData-img" src="/img/nodata.5e986c71.png" alt="">
					<div class="noData-text">未查到数据</div>
				</div>
			</div>
			<!-- 日期 -->
			<div class="times" v-if='tabActive==1' :style="{height:topH}">
				<div class="timesListTab">
					<div @click="chooseActive(i)" class="timesListTab-i" :class="dayIndex==i?'active':''"
						v-for="(v,i) in dayList" :key='i'>
						<div>
							{{v.str}}
							<div class="mt5">{{v.time}}</div>
						</div>
					</div>
				</div>
				<div class="times-list">
					<div class="times-list-title">普通门诊</div>
					<div class="times-list-item flex1" v-for="(v,i) in serviceAList[dayIndex].rgst_arrange" :key='i'>
						<div class="times-list-item-top">
							<img @click="toDoctorShow(v)" :src="v.doctor_sex=='男'?require('@/assets/img/man.jpg'):require('@/assets/img/women.jpg')" alt="">
							<div>
								<div @click="toDoctorShow(v)" class="times-list-item-top-name">{{v.doctor_name}}</div>
								<div>
									{{serviceAList[dayIndex].date}} <span>{{v.time_slot}}</span>{{v.staff_profession||''}}
								</div>
							</div>
						</div>
						<div class='times-list-item-btn t_center' @click="toDoctorYuyue('/chooseTime',v,serviceAList[dayIndex].date)">
							<div class="times-list-item-btn-btn flex3" :class="v.remainder<=0?'no':''">{{v.remainder<=0?'约满':'有号'}}</div>
							<div>剩{{v.remainder||0}}个</div>
						</div>
					</div>
				</div>
			</div>
			</van-pull-refresh>
		</div>
		
	</div>
	
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				scrollTop:0,
				refDisabled:false,
				tabActive: 0,
				tabList: [{
						name: '按医生挂号'
					},
					// {
					// 	name: '按日期挂号'
					// }
				],
				topH: 0,
				doctorList: [],
				dayList: [],
				dayIndex: 0,
				serviceAList: [],
				dept_id: '', //科室id
				title:'',
				searchWord:''
			};
		},
		beforeRouteEnter(to, from, next) {
			if (from.name == 'doctorShow' || from.name == 'chooseTime') {
			  next(vm => {
				  
			  });
			} else {
			  next(vm => {
				  vm.doResetParams();
			  });
			}
		},
		created() {
			this.doResetParams()
		},
		watch: {
			scrollTop(val){
				if(val==0){
					this.refDisabled=false
				}else{
					this.refDisabled=true
				}
			}
		},
		mounted() {
			const topHeight = this.$refs.myDiv.getBoundingClientRect().top;
			const bottomHeight = this.$refs.myDiv.getBoundingClientRect().bottom;
			const height = bottomHeight - topHeight
			this.topH = `calc(100vh - ` + height + `px)`
			// document.title = this.title
			let box = this.$refs.pageInfo;
			box.addEventListener('scroll',()=>{
				this.scrollTop = box.scrollTop;
			});
		},
		methods: {
			doResetParams(){
				console.log(this.$route.query,"开始请求rigster")
				if(this.$route.query.dept_id) {
					this.dept_id = this.$route.query.dept_id||''
					this.title=this.$route.query.title
					this.getdoctor()
					this.getservice()
					this.gettime()
					this.tabList=[{
							name: '按医生挂号'
						},
						// {
						// 	name: '按日期挂号'
						// }
					]
				}else{
					this.dept_id=''
					this.title=this.$route.query.title
					if(this.$route.query.search) {
						this.searchWord = this.$route.query.search
						this.getdoctor()
						this.tabList=[{
								name: this.title
							}
						]
					}
				}
			},
			onRefresh() {
				this.getdoctor()
				this.getservice()
				setTimeout(() => {
					this.isLoading = false;
				}, 500);
			},
			getStr(str){
				console.log(str)
				var arr=str.split('-')
				return arr[1]+'-'+arr[2]
			},
			showNo(){
				this.$toast('该日期已约满！')
			},
			toAlters(){
				this.$toast('该医生没有出诊日期，请选择有出诊日期的医生挂号！')
			},
			getdoctor() {
				let that=this
				let url = "/api/his/registerArrange4Doctor";
				var data={
					dept_id:that.dept_id||'',
				}
				if(that.dept_id==''){
					data={
						search:that.searchWord||''
					}
					url='/api/his/registerDoctor'
				}
				that.$axios.post(url,data).then(res => {
					if(that.dept_id!=''){
						that.doctorList = res.doctors
						that.doctorList.forEach((item, index) => {
							that.$set(item,'chooseDayIndex',0)
						})
					}else{
						that.doctorList = res.doclist
					}
					
					
				})
				.catch(err => {});
			},
			getservice() {
				let url = "/api/his/registerArrange";
				this.$axios.post(url,{
					dept_id:this.dept_id,
				}).then(res => {
					this.serviceAList = res.date_arrange
				})
				.catch(err => {});
			},
			getList(text) {
				let url = "/api/his/registerArrange";
				this.$axios.post(url,{
					dept_id:this.dept_id,
					doctor_id:''
				}).then(res => {
					this.doctorList = res.doclist
				})
				.catch(err => {});
			},
			gettime() {
				var now = new Date();
				var nowTime = now.getTime();
				var oneDayTime = 24 * 60 * 60 * 1000;
				var timeArr=[]
				for (var i = 0; i < 7; i++) {
					var ShowTime = nowTime + i * oneDayTime;
					var myDate = new Date(ShowTime);
					var year = myDate.getFullYear();
					var month = myDate.getMonth() + 1;
					var date = myDate.getDate();
					// console.log(year + "-" + month + "-" + date)
					var str = "周" + "日一二三四五六".charAt(myDate.getDay());
					// console.log(str)
					timeArr.push({
						time:month + "-" + date,
						str:str,
						date:year + "-" + month + "-" + date
					})
				}
				this.dayList=timeArr
			},
			chooseActive(i) {
				this.dayIndex = i
			},
			toPageLink(url) {
				this.$router.push({
					path: url,
					query: {},
				})
			},
			toDoctor(url,v){
				console.log(v,'999')
				if(v.rgst_arrange&&v.rgst_arrange.length<=0){
					return this.toAlters()
				}
				
				this.$router.push({
					path:url,
					query:{
						dept_id:v.dept_id,
						doctor_id:v.doctor_id
					},
				})
			},
			toDoctorShow(v) {
				this.$router.push({
					path:'/doctorShow',
					query: {
						doctor_id:v.doctor_id,
						dept_id:v.dept_id
					},
				})
			},
			toDoctorYuyue(url,v,time) {
				this.$router.push({
					path: url,
					query: {
						dept_id:this.dept_id,
						doctor_id:v.doctor_id,
						time:time
					},
				})
			},
		}
	};
</script>

<style lang="less" scoped>
	.content {
		min-height: 100vh;
		background-color: #f0f8f8;
        .topsNav{
			height: 45px;
			position: fixed;
			top: 0;
			width: 100%;
			z-index: 9;
		}
		/deep/.van-tabs__line {
			background: #4A8CFF;
		}

		.mt5 {
			margin-top: 7px;
		}

		.timesListTab {
			width: 100%;
			height: 44px;
			overflow-x: scroll;
			white-space: nowrap;
			&-i {
				padding-top: 8px;
				display: inline-block;
				font-size: 11px;
				font-family: PingFang;
				font-weight: 500;
				color: #333333;
				text-align: center;
				width:calc(100% / 7);
				height: 44px;
				background: #FFFFFF;
			}
			.active {
				color: #1977FD;
			}
		}

		.info {
			padding-top: 45px;
			.times {
				padding-top: 5px;
				overflow-y: scroll;
				&-list {
					padding: 0 18px;
					&-item {
						background: #FFFFFF;
						border-radius: 10px;
						padding: 8px;
						margin-bottom: 10px;
						&-btn {
							font-size: 11px;
							font-family: PingFang;
							font-weight: 500;
							color: #666666;
							&-btn {
								width: 60px;
								height: 30px;
								background: #4A8CFF;
								border-radius: 15px;
								font-size: 13px;
								font-family: PingFang;
								font-weight: 500;
								color: #FFFFFF;
								margin-bottom: 4px;
							}

							.no {
								background: rgba(167, 167, 167, 0.5);

							}
						}

						&-top {
							font-size: 11px;
							font-family: PingFang;
							font-weight: 500;
							color: #666666;
							display: flex;
							align-items: center;

							span {
								color: #1977FD;
								margin-right: 12px;
							}

							&-name {
								font-size: 15px;
								font-family: PingFang;
								font-weight: 500;
								color: #333333;
								margin-bottom: 12px;
							}

							img {
								width: 44px;
								height: 44px;
								margin-right: 9px;
								border-radius: 50%;
							}
						}
					}

					&-title {
						padding: 16px 0;
						font-size: 13px;
						font-family: PingFang;
						font-weight: 500;
						color: #333333;
					}
				}
			}

			.list {
				padding: 10px 18px;
				overflow-y: scroll;
			}
			.doctorItem {
				padding: 0 8px;
				margin-bottom: 10px;
				background: #FFFFFF;
				border-radius: 10px;
				&-time {
					padding: 13px 0 5px 0;
					font-size: 13px;
					font-family: PingFang;
					font-weight: 500;
					color: #333333;
					display: flex;
					align-items: flex-start;
					&-list {
						margin-top: -3px;
						margin-left: 10px;
						width: calc(100% - 71px);
						&-i {
							margin-right: 7px;
							display: inline-block;
							padding: 0 8px;
							line-height: 18px;
							height: 18px;
							background: #EEEEEE;
							font-size: 11px;
							font-family: PingFang;
							font-weight: 500;
							color: #333333;
							border-radius: 9px;
							margin-bottom: 8px;
							&-t{
								line-height: 20px;
							}
						}
						.active{
							background: #4A8CFF;
							color: #fff;
						}
					}
				}

				&-top {
					display: flex;
					align-items: center;
					padding: 12px 0;
					border-bottom: 1px solid #eee;

					&-img {
						width: 44px;
						height: 44px;
						margin-right: 12px;
						border-radius: 50%;
					}

					&-info {
						width: calc(100% - 56px);
						font-size: 13px;
						font-family: PingFang;
						font-weight: 500;
						color: #666666;

						&-t {
							line-height: 20px;
						}

						&-btn {
							width: 40px;
							height: 18px;
							background: #4A8CFF;
							border-radius: 9px;
							font-size: 11px;
							font-family: PingFang;
							font-weight: 500;
							color: #FFFFFF;
							text-align: center;
							line-height: 18px;
						}

						.noBtn {
							background: rgba(167, 167, 167, 0.5);
							color: #fff;
						}

						&-name {
							font-size: 15px;
							font-family: PingFang;
							font-weight: 500;
							color: #333333;
							margin-bottom: 9px;
						}
					}
				}
			}
		}
	}
</style>